<template>
    <div class="updateTask">
        <div class="input-box">
            <div class="input-label">具体工作内容</div>
            <div class="input-fill">
                <van-field style="background: rgba(242, 243, 245, 1)" disabled v-model="form.workContent" rows="2"
                    autosize type="textarea" placeholder="请填写" />
                <!-- <input type="text" v-model="form.workContent" disabled placeholder="请填写"> -->
                <!-- <el-input v-model="input" placeholder="请填写" /> -->
            </div>
        </div>
        <div class="select-box" id="select-box" @click="poupShowObj.jhShow = true">
            <div class="select-label">进度状态</div>
            <div class="select-value">
                <div class="tips">
                    {{ form.workStatus ? form.workStatus : '请选择' }}
                </div>
                <img src="@/assets/images/rightArrow.png" alt="">
            </div>
        </div>
        <div class="input-box">
            <div class="input-label input-label-required">考评内容</div>
            <div class="input-fill">
                <van-field style="background: rgba(242, 243, 245, 1)" v-model="form.assessmentContent" rows="2" autosize
                    type="textarea" placeholder="请填写" />
                <!-- <input type="text" v-model="form.superviseComment" placeholder="请填写"> -->
                <!-- <el-input v-model="input" placeholder="请填写" /> -->
            </div>
        </div>
        <div class="btn-list">
            <div class="cancel btn btnPointer" @click="router.go(-1)">取消</div>
            <div class="confirm btn btnPointer" @click="onSubmit()">提交</div>
            <!-- <div class="confirm btn btnPointer" @click="onSubmit">提交</div> -->
        </div>
    </div>
    <van-popup teleport="body" v-model:show="poupShowObj.jhShow" position="bottom">
        <van-picker title="请选择计划状态" :columns="jhColumns" @confirm="onJh" ref="jhRef" @cancel="jhShow = false" />
    </van-popup>
</template>

<script setup>
import { superviseAdd, workAdd } from "@/service/yearWork"
import { useDict } from "@/stores/dictstore"
import { useUser } from "@/stores/user"

const dictStore = useDict()
const { orgList, userLdList } = toRefs(dictStore)
const route = useRoute()
const router = useRouter()
const form = reactive({})
const poupShowObj = reactive({
    jhShow: false
})
const jhColumns = [
    {
        text: '正常',
        value: '正常'
    },
    {
        text: '滞后',
        value: '滞后'
    },
    {
        text: '停滞',
        value: '停滞'
    },
    {
        text: '完成',
        value: '完成'
    }
]
const jhRef = ref(null)
const onJh = () => {
    const { value } = jhRef.value.getSelectedOptions()[0]
    form.workStatus = value
    poupShowObj.jhShow = false
}
async function onSubmit() {
    try {
        let flag = form.assessmentContent && form.workStatus ? true : false
        if (!flag) {
            showToast("请填写考评内容");
            return
        }
        let params = {
            "workYear": form.workYear ?? "",
            "businessType": form.businessType ?? "",
            "mainBusinessUnitOrgCode": form.mainBusinessUnitOrgCode ?? "",
            "businessUnitOrgCodes": form.businessUnitOrgCodes ?? "",
            "workLeader": form.workLeader ?? "",
            "workStatus": form.workStatus ?? "",
            "workContent": form.workContent ?? "",
            "annualPlan": form.annualPlan ?? "",
            "workProgress": form.workProgress ?? "",
            "workStatement": form.workStatement ?? "",
            "workNote": form.workNote ?? "",
            "workCategory": form.workCategory ?? "",
            "workBigType": form.workBigType ?? "",
            "assessmentContent": form.assessmentContent ?? "", //考核评价内容
        }
        let reqParams = {
            requestType: '考评',//申请类型
            changeContentBefore: changeBefore.value, //申请内容变更前
            changeContentAfter: params,//申请内容变更后
            workProgressObjectId: form.objectId
        }
        // 考评需要办公室
        let mainBusinessUnit = orgList.value.find(item => {
            return item.name == '办公室'
        })
        reqParams.mainBusinessUnit = mainBusinessUnit.name
        // 办公室的code
        reqParams.mainBusinessUnitOrgCode = mainBusinessUnit.code
        // 分管领导的
        reqParams.managerLeaderIds = params.workLeader
        console.log("🚀 ~ onSubmit ~ reqParams:", reqParams)
        // 调用接口，提交申请
        let res = await workAdd(reqParams)
        if (res.code == 0) {
            showToast("考评成功");
            router.go(-1)
        }
    } catch (error) {

    }
}
const changeBefore = ref({})
onMounted(() => {
    // 变更前的数据
    changeBefore.value = JSON.parse(route.query.rowData)
    Object.assign(form, JSON.parse(route.query.rowData))
})


</script>
<style></style>
<style lang="scss" scoped>
.updateTask {
    color: rgba(51, 51, 51, 1);
    padding: 0 26px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: calc(100vh - 92px - 10px);
    margin-top: 10px;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

}

.input-box {
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(239, 239, 239, 1);

    .input-label {
        font-size: 26px;
        margin: 5px 0;
        color: rgba(51, 51, 51, 1);
    }

    .input-label-required::before {
        content: "*";
        color: red;
    }

    .input-fill {
        input {
            width: 100%;
            font-size: 28px;
            padding: 0;
            border: none;
        }

        input::placeholder {
            color: #a8abb2;
        }

        input:disabled {
            // cursor: default;
            background-color: unset !important;
            color: #a8abb2;
        }

    }
}

.btn-list {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 40px 0;

    .cancel {
        width: 144px;
        height: 76px;
        opacity: 1;
        border-radius: 50px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(221, 221, 221, 1);
        font-size: 28px;
        color: rgba(166, 166, 166, 1);
    }

    .confirm {
        margin-left: 24px;
        width: 200px;
        height: 76px;
        border-radius: 50px;
        background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(239, 239, 239, 1);

    .select-label {
        font-size: 26px;
        margin-top: 5px;
        color: rgba(51, 51, 51, 1);
    }

    .select-label::before {
        content: '*';
        color: red;
    }

    .select-value {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 10px;
        font-size: 26px;
        // color: rgba(193, 193, 193, 1);

        img {
            margin-left: 5px;
            width: 12px;
            height: 20px;
        }
    }
}
</style>